<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        html,body,#page-wrap,p{
            padding: 0;
            margin: 0;
            overflow: hidden;
        }
        #page-wrap{
            /*margin-left: 20px;*/
            /*margin-top: 20px;*/
            color: #fff;
            background: #363d4b;
            padding: 15px;
            list-style: none;
            width: 100%;
            height: 100%;
            /*width: 360px;*/
            /*height:120px;*/
            /*border: 1px solid red;*/
            display: flex;
            position: relative;
            box-sizing: border-box;
            border-radius: 8px;
        }
        #page-wrap .list{
            position: relative;
            /*border: 1px solid green;*/
        }
        #page-wrap .list.left{
            width: 20%;
            /*border: 1px solid green;*/
        }
        #page-wrap .list.right{
            width: 80%;
            /*border: 1px solid green;*/
        }
        .close{
            position: absolute;
            right: 15px;
            top: 10px;
            cursor: pointer
        }
        .time{
            position: absolute;
            right: 15px;
            bottom: 10px;
            font-size: 14px
        }
        .content{
            font-size: 14px
        }
        .title{
            font-weight: 500;
            margin-bottom: 10px
        }
        .pic{
            width: 50px;
            height: 50px;
            display:block;
            border-radius: 50%;
            margin-left: 3px;
            margin-top: 20px
        }
        .close:hover{
            opacity: 0.9;
        }
        .close:active{
            opacity: 0.8;
        }
        #success,#fail{
            display: none;
        }
        #page-wrap .list.left .state{
            position: absolute;
            left: 42px;
            top: 55px;
            display: none;
        }
        #successName,#failName{
            margin-right: 5px;
            font-weight: 500;
        }
    </style>
</head>
<body>
<ul id="page-wrap">
    <li class="list left">
        <img class="state" id="successIcon" src="./success.png" alt="">
        <img class="state" id="failIcon" src="./fail.png" alt="">
        <img class="pic" id="head" src="./head.png" alt="">
    </li>
    <!--<li class="list center">22</li>-->
    <li class="list right">
        <p class="title" id="title"></p>
        <p class="content">
            <div id="success">
                <span id="successName"></span>
<!--        通行成功-->
                <span id="trafficStatus"></span>
            </div>
            <div id="fail">
                <!--<span id="failName"></span>-->
<!--                您未注册，禁止通行！-->
                <span id="accessFailure"></span>
            </div>
        </p>
        <span class="time" id="time"></span>
        <span class="close" id="close">&#10005</span>
    </li>
</ul>

<script>

    // var urlStr="http://127.0.0.1:15553/static/messagePopup/index.html?success=true&passRecordId=fec7dacc-34dc-4bbe-868c-532c8916f4da&deviceName=Maxvision"
    //
    var urlStr=location.href

    var params=filterParams(urlStr)
    // 弹窗标题
    document.getElementById("title").innerText=decodeURIComponent(params.deviceName)

    // params.success="false"

    var trafficStatusText={
        "zh-CN":"通行成功",
        "en-US":"Successful passage",
    }
    var accessFailureText={
        "zh-CN":"您未注册，禁止通行！",
        "en-US":"You are not registered, no access allowed!",
    }
    console.log('语言',params.language,trafficStatusText,accessFailureText[params.language]);
    // 通行成功时，弹窗背景色是黑色，失败是红色
    if(params.success.toLowerCase()=="true"){
        // 通行成功的提示语
        document.getElementById("trafficStatus").innerText=trafficStatusText[params.language]
        document.getElementById("success").style.display="block"
        document.getElementById("successIcon").style.display="block"
    }else{
        // 通行失败的提示语
        document.getElementById("accessFailure").innerText=accessFailureText[params.language]
        document.getElementById("fail").style.display="block"
        document.getElementById("failIcon").style.display="block"
    }

    // params.passRecordId='Null'
    if(params.passRecordId==""||params.passRecordId=="Null"||params.passRecordId=="null"||params.passRecordId==null||params.passRecordId=="undefined"||params.passRecordId==undefined){
        // 显示默认头像
        document.getElementById("head").setAttribute("src","./head.png")
        // 通行时间
        document.getElementById("time").innerText=new Date().toLocaleString()
    }else{
        ajax({
            url:'/api/v1/passrecord/get',//后台的地址
            // url:'http://172.31.52.156:15553/api/v1/passrecord/get',//后台的地址
            type:'get',
            data:{
                id:params.passRecordId
            },
            success:function(res){
                //服务器返回响应
                var data=JSON.parse(res).data
                // 通行时间
                document.getElementById("time").innerText=data.passDateTime
                if(data.personnelInfo){
                    // 人员名称
                    document.getElementById("successName").innerText=data.personnelInfo.name||''
                    // document.getElementById("failName").innerText=data.personnelInfo.name||''

                    // 有头像时，显示头像
                    if(data.personnelInfo.biodataInfos&&data.personnelInfo.biodataInfos.face.length){
                        // 转base64头像
                        fileToBase64(data.personnelInfo.biodataInfos.face[0].fileInfo)
                    }else{

                    }
                }else if(data.imagePath){
                    // 无头像时，显示抓拍图片
                    fileToBase64(data.imagePath)
                }else{
                    // 无人脸、抓拍图片时，显示默认头像
                    document.getElementById("head").setAttribute("src","./head.png")
                }



            },
            //异常处理
            error:function(err){
                console.log(err)
            }
        })
    }



    var closeBtn=document.getElementById("close")

    closeBtn.onclick=function () {
        console.log('关闭');
        closePopup()
    }

    // 关闭弹窗
    function closePopup() {
        ajax({
            url:'/api/v1/message/closepopup/'+params.popupId,//后台的地址
            // url:'http://172.31.52.156:15553/api/v1/message/closepopup/'+params.popupId,//后台的地址
            type:'POST',
            success:function(res){

            },
            //异常处理
            error:function(err){
                console.log(err)
            }
        })
    }

    function fileToBase64(url) {
        ajax({
            url:'/api/v1/file/filetobase64',//后台的地址
            // url:'http://172.31.52.156:15553/api/v1/file/filetobase64',//后台的地址
            type:'POST',
            data:{
                filePath:url
            },
            success:function(res){
                // 设置头像
               document.getElementById("head").setAttribute("src",res)
            },
            //异常处理
            error:function(err){
                console.log(err)
            }
        })
    }

    function filterParams(url) {
        let obj = {}
        let str = url.split("?")[1].split("&");
        for (var i = 0; i < str.length; i++) {
            let a = str[i].split('=')
            obj[a[0]] = a[1]
        }
        return obj
    }


    /*
*@method jsonUrl(josn) 处理json格式数据，返回成get请求URL数据格式name1=value1&name2=value2
*/
    function jsonUrl(json){
        var res='';
        var arr=[];
        for(var key in json){//for in 遍历对象获取属性和值key为属性，json[key]为对应属性值
            arr.push(key+'='+json[key])
        }
        res=arr.join('&');
        return res;
    }

    /*
    *@method ajax(json) 封装ajax
    */
    function ajax(json){
        if(!json){
            alert('需要传值');
            return;
        }
        //默认值的设定
        if(!json.url){
            alert('后台的地址必填项');
            return
        }
        json.type=json.type || 'get';
        json.data=json.data || {};

        //1、创建一个ajax对象
        var oAjax;
        //考虑兼容性
        if(window.XMLHttpRequest){
            oAjax=new XMLHttpRequest();
        }else if(window.ActiveObject){   //兼容IE6一下版本
            oAjax=new ActiveXobject('Microsoft.XMLHTTP');
        }
        //.toLowerCase() 转换成小写
        switch (json.type.toLowerCase()){
            case 'get':
                //2、创建链接   oAjax.open('请求的方式','请求的地址',是否异步)
                oAjax.open('get',json.url+'?'+jsonUrl(json.data),true)
                //3、发送
                oAjax.send(null);
                break;
            case 'post':
                //2、创建链接   oAjax.open('请求的方式','请求的地址',是否异步)
                oAjax.open('post',json.url,true);
                //请求头的类型
                oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                //3、发送
                oAjax.send(jsonUrl(json.data));
                break;
        }

        //4.等待接收消息
        oAjax.onreadystatechange=function () {
            if(oAjax.readyState==4){//通讯已经完成，数据全部接收
                if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){//网络状态是成功
                    /*console.log(oAjax.responseText)*/
                    json.success && json.success(oAjax.responseText);
                }else{
                    json.error && json.error(oAjax.status);
                }
            }
        }

    }


</script>

</body>
</html>